<template>
  <div>
    <button class="permission-edit" v-if="props.edit" @click="handleEdit">
      {{ props.edit }}
    </button>
    <button class="permission-del" v-if="props.del" @click="handleDel">
      {{ props.del }}
    </button>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ['edit', 'del']
}
</script>
<script setup>
const props = defineProps();
const emits = defineEmits(['handleEdit', 'handleDel']);
const handleEdit = (e) => {
  emits('handleEdit');
}
const handleDel = (e) => {
  emits('handleDel')
}

</script>
<style lang="less" scoped>
.permission-edit,
.permission-del {
  width: 128px;
  height: 44px;
  font-size: 24px;
  color: #1981F4;
  line-height: 44px;
  background: #EBF4FF;
  border: 1px solid #2C8CF0;
  border-radius: 5px;
  line-height: 44px;
}

.permission-del {
  margin-left: 18px;
  color: #EC3F14;
  background: #FFEFEB;
  border: 1px solid #EC3F14;
}
</style>